<template>
  <div class="app-container">
    <div class="top_search_form">
      <el-form
        :model="formInfo"
        ref="formInfoRef"
        inline
        :label-width="appStore.language == 'zh' ? '100px' : 'px'"
      >
        <el-form-item :label="t('assetsList.assetType')">
          <el-select
            v-model="formInfo.assetsClassifyId"
            :placeholder="t('assetsList.assetTypePlaceholder')"
            clearable
            style="width: 150px"
          >
            <el-option
              v-for="item in AssetClassification"
              :key="item.dictionaryKey"
              :label="item.dictionaryName"
              :value="item.dictionaryCode"
            ></el-option>
          </el-select>
        </el-form-item>

        <el-form-item :label="t('assetsList.organization')">
          <el-tree-select
            style="width: 180px"
            clearable
            v-model="formInfo.ownershipOrganizationalId"
            :placeholder="t('assetsList.orgPlaceholder')"
            :data="depts"
            :props="{
              label: 'Label',
              children: 'children',
              value: 'value',
            }"
            check-strictly
            :highlight-current="true"
            :render-after-expand="false"
          />
        </el-form-item>

        <el-form-item :label="t('assetsList.usageOrganization')">
          <el-tree-select
            style="width: 180px"
            clearable
            v-model="formInfo.useOrganizationId"
            :placeholder="t('assetsList.useOrgPlaceholder')"
            :data="depts"
            :highlight-current="true"
            :props="{
              label: 'Label',
              children: 'children',
              value: 'value',
            }"
            check-strictly
            :render-after-expand="false"
          />
        </el-form-item>

        <el-form-item>
          <el-button type="primary" @click="queryList">{{
            t("common.search")
          }}</el-button>
        </el-form-item>
      </el-form>
    </div>
    <div class="table_container">
      <div class="table_top_btn">
        <right-toolbar
          ref="rightToolRef"
          @queryTable="queryList"
          :columns="columns"
          :advanceVisible="false"
        >
        </right-toolbar>
      </div>
      <div class="table_area">
        <el-table
          ref="assetsTableRef"
          height="100%"
          v-loading="loading"
          :data="assetsData"
          :header-cell-style="{ textAlign: 'center' }"
          :cell-style="{ textAlign: 'center' }"
        >
          <template v-for="(item, index) in columns" :key="item.key">
            <el-table-column
              v-if="item.visible"
              :prop="item.prop"
              :label="t(`tableColumns.${item.langKey}`)"
              :width="item.width"
              :show-overflow-tooltip="true"
            >
              <template #default="{ row }">
                <el-tag
                  v-if="item.prop == 'enableFlag'"
                  :type="
                    row.enableFlag == 0
                      ? 'success'
                      : row.enableFlag == 1 || row.enableFlag == 3 || row.enableFlag == 4
                      ? 'warning'
                      : 'danger'
                  "
                >
                  {{ row.enableFlagName }}
                </el-tag>
                <span v-else-if="item.prop == 'purchaseDate'">
                  {{ parseTime(row[item.prop], "{y}-{m}-{d} {h}:{i}:{s}") || "无" }}
                </span>

                <span v-else>{{ row[item.prop] || "无" }}</span>
              </template>
            </el-table-column>
          </template>
        </el-table>
      </div>
      <div class="pagination-area">
        <pagination
          :total="page.total"
          v-model:page="page.pageNum"
          v-model:limit="page.pageSize"
          @pagination="queryList"
        />
      </div>
    </div>
  </div>
</template>

<script setup name="AssetisList">
import { useI18n } from "vue-i18n";
const { t } = useI18n();
import useAppStore from "@/store/modules/app";
const appStore = useAppStore();
import { GetAssetStatisticsList } from "@/api/statisticalManagement/index";
import { GetOrganizationTreeAll } from "@/api/assetsManage/organization";
import RightToolbar from "@/components/RightToolbar";
import { getUserInfo } from "@/utils/auth";
import { ElMessage } from "element-plus";
import { assetsColums } from "@/utils/table/columns";
const { proxy } = getCurrentInstance();
const { AssetClassification } = proxy.useDict("AssetClassification");

const assetsData = ref([]); //资产列表数据
const loading = ref(false);
const columns = assetsColums;
const page = reactive({
  total: 0,
  pageNum: 1,
  pageSize: 100,
});

const formInfo = ref({
  assetsClassifyId: "",
  ownershipOrganizationalId: "",
  useOrganizationId: "",
});

const depts = ref([]); // 组织树数据
const rightBtn = reactive({
  // 显隐列
  showSearch: true,
  drawerSearchVisible: false,
});

const queryOrganization = () => {
  GetOrganizationTreeAll("")
    .then((res) => {
      depts.value = res.output;
    })
    .catch((err) => {
      console.log("组织获取失败", err);
    });
};

const queryList = () => {
  const rawForm = { ...formInfo.value };

  const params = {
    pagination: page.pageNum - 1,
    pageRow: page.pageSize,
    isInit: true,
    ...rawForm,
    assetsClassifyId: rawForm.assetsClassifyId || "-1",
    ownershipOrganizationalId: rawForm.ownershipOrganizationalId || "-1",
    useOrganizationId: rawForm.useOrganizationId || "-1",
  };
  console.log("查询参数1", params);
  loading.value = true;
  GetAssetStatisticsList(params)
    .then((res) => {
      loading.value = false;
      assetsData.value = res.output.output;
      page.total = res.output.count;
    })
    .catch((err) => {
      loading.value = false;
    });
};

onMounted(() => {
  queryList();
  queryOrganization();
});
</script>
<style lang="scss" scoped>
.top_search_form {
  background-color: #fff;
  margin-bottom: 20px;
  padding: 20px 0px 0 0px;
  border-radius: 6px;
  display: flex;
  // align-items: center;
  max-height: 70px;
  overflow-y: auto;
}

.table_container {
  height: calc(100% - 100px);
}
</style>
